<template>
  <div class="linkage">
    <p>下⚪拉⚪框⚪没⚪有⚪数⚪据⚪的⚪解⚪决⚪方⚪法：</p>
    <p>1. 进入到根目录下的server文件夹</p>
    <p>2. 执行npm run dev</p>
    <el-select
      v-model="province"
      placeholder="省级地区"
      @change="choseProvince">
      <el-option
        label="请选择"
        value="" />
      <el-option
        v-for="item in provinceArr"
        :key="item.id"
        :label="item.value"
        :value="item.id" />
    </el-select>
    <el-select
      v-model="city"
      placeholder="市级地区"
      @change="choseCity">
      <el-option
        label="请选择"
        value="" />
      <el-option
        v-for="item in citydata"
        :key="item.id"
        :label="item.value"
        :value="item.id" />
    </el-select>
    <el-select
      v-model="area"
      placeholder="区级地区"
      @change="choseArea">
      <el-option
        label="请选择"
        value="" />
      <el-option
        v-for="item in areadata"
        :key="item.id"
        :label="item.value"
        :value="item.id" />
    </el-select>

    <p>1. provinceAndCityData是省市二级联动数据（不带“全部”选项）</p>
    <p>2. regionData是省市区三级联动数据（不带“全部”选项）</p>
    <p>3. provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）</p>
    <p>4. regionDataPlus是省市区三级联动数据（带“全部”选项）</p>
    <p>5. "全部"选项绑定的value是空字符串""</p>
    <p>6. CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市</p>
    <p>7. TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
    </p>
    <el-cascader
      v-model="selectedOptions"
      size="large"
      :options="options"
      @change="handleChange" />
    <el-cascader
      v-model="selectedOptions2"
      size="large"
      :options="options2"
      @change="handleChange2" />
  </div>
</template>

<script>
import axios from 'axios'
import { provinceAndCityData, regionDataPlus } from 'element-china-area-data'
export default {
  data() {
    return {
      province: '',
      provinceArr: '',
      city: '',
      citydata: [],
      cityArr: '',
      area: '',
      areadata: [],
      areaArr: '',
      options: provinceAndCityData,
      options2: regionDataPlus,
      selectedOptions2: [],
      selectedOptions: []
    }
  },
  created: function() {
    this.getCityData()
  },

  methods: {
    handleChange(value) {
      console.log(value)
    },
    handleChange2(value) {
      console.log(value)
    },
    // 加载china地点数据，三级
    getCityData: function() {
      var that = this
      axios.get('http://localhost:3000/api/city').then(function(response) {
        console.log(response)
        if (response.status === 200) {
          var data = response.data.data
          that.provinceArr = []
          that.cityArr = []
          that.areaArr = []
          // 省市区数据分类
          for (var item in data) {
            if (item.match(/0000$/)) { // 省
              that.provinceArr.push({ id: item, value: data[item], children: [] })
            } else if (item.match(/00$/)) { // 市
              that.cityArr.push({ id: item, value: data[item], children: [] })
            } else { // 区
              that.areaArr.push({ id: item, value: data[item] })
            }
          }
          // 分类市级
          for (var index in that.provinceArr) {
            for (var index1 in that.cityArr) {
              if (that.provinceArr[index].id.slice(0, 2) === that.cityArr[index1].id.slice(0, 2)) {
                that.provinceArr[index].children.push(that.cityArr[index1])
              }
            }
          }
          // 分类区级
          for (var item1 in that.cityArr) {
            for (var item2 in that.areaArr) {
              if (that.areaArr[item2].id.slice(0, 4) === that.cityArr[item1].id.slice(0, 4)) {
                that.cityArr[item1].children.push(that.areaArr[item2])
              }
            }
          }
        } else {
          console.log(response.status)
        }
      }).catch(function(error) { console.log(error) })
    },
    // 选省
    choseProvince: function(e) {
      for (var index2 in this.provinceArr) {
        if (e === this.provinceArr[index2].id) {
          this.city = ''
          this.area = ''
          this.citydata = this.provinceArr[index2].children
          this.areadata = this.provinceArr[index2].children[0].children
          this.E = this.areadata[0].id
        }
      }
    },
    // 选市
    choseCity: function(e) {
      for (var index3 in this.cityArr) {
        if (e === this.cityArr[index3].id) {
          this.area = ''
          this.areadata = this.cityArr[index3].children
          this.E = this.areadata[0].id
          console.log(this.E)
        }
      }
    },
    // 选区
    choseArea: function(e) {
      this.E = e
      console.log(this.E)
    }
  }
}
</script>
<style>
.el-select,
.el-cascader {
  margin-right: 10px;
}
p{
  color: red;
  margin: 20px 0 40px!important;
}
.rainbow p {
  color: red;
  font-size: 20px!important;
  width: 80%;
  height: 52px;
  line-height: 60px;
  border-radius: 20px 20px 0 0;
  margin: 20px auto 40px !important;
  background: linear-gradient(#eee,#fff);
  text-shadow:
    0 1px 0 #eee,
    0 1.1px 0 #ccc,
    0 1.2px 0 #bababa,
    0 1.3px 0 #aaa,
    0 1.4px 0 #999,
    0 1.5px 0 #ccc
}
</style>
